<template>
  <div class="map" id="map"></div>
</template>
<script>
import $ from "jquery";
import mapJson from "@/assets/json/map.json";
import { mapMutations } from "vuex";
var myChart;
var area;
export default {
  name: "geogeo3d",
  data() {
    const _self = this;
    return {
      bg: "",
      chartOption: {
        geo: {
          // backgroundColor: {
          //     color: {
          //         image: this.imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
          //         repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
          //     }
          // },
          zoom: 1.5,
          show: true,
          map: `guangxi`,
          //   left: "0",
          //   top: `0%`,
          //   right: "8%",
          //   bottom: "0",
          itemStyle: {
            areaColor: "rgba(128, 128, 128, 0)",
            borderwidth: 0,
            borderColor: `rgba(128, 128, 128, 0)`,
            // shadowBlur: 20,
            // shadowOffsetY: 4,
            // shadowOffsetX: 4,
            // shadowColor: `#ddd`,
          },
        },
        series: [
          {
            type: `effectScatter`,
            coordinateSystem: `geo`,
            rippleEffect: {
              //涟漪特效
              period: 2, //动画时间，值越小速度越快
              brushType: `stroke`, //波纹绘制方式 stroke, fill
              scale: 8, //波纹圆环最大限制，值越大波纹越大
            },
            itemStyle: {
              color: `orange`,
              shadowBlur: 2,
            },
            symbolSize: 10,
            data: [
              { name: `南宁市`, value: [108.520004, 23.02402] },
              //[109.508268, 18.247872, `三亚市`],
              //[109.516662, 18.776921, `五指山市`]
            ],
          },
        ],
      },

      areaName: "广西自治区",
      geoCoordMap: {
        南宁市: [108.520004, 23.02402],
        柳州市: [109.411703, 24.814617],
        桂林市: [110.399121, 25.274215],
        梧州市: [110.977604, 23.474803],
        北海市: [109.419254, 21.673343],
        防城港市: [107.945478, 21.814631],
        钦州市: [109.024175, 22.167127],
        贵港市: [110.002146, 23.2936],
        玉林市: [110.254393, 22.38136],
        百色市: [106.616285, 23.897742],
        贺州市: [111.452056, 24.414141],
        河池市: [107.862105, 24.695899],
        来宾市: [109.229772, 23.733766],
        崇左市: [107.353926, 22.404108],
      },
      geoMap: {
        南宁市: { order: 0, depCode: 450100 },
        柳州市: { order: 1, depCode: 450200 },
        桂林市: { order: 2, depCode: 450300 },
        梧州市: { order: 3, depCode: 450400 },
        北海市: { order: 4, depCode: 450500 },
        防城港市: { order: 5, depCode: 450600 },
        钦州市: { order: 6, depCode: 450700 },
        贵港市: { order: 7, depCode: 450800 },
        玉林市: { order: 8, depCode: 450900 },
        百色市: { order: 9, depCode: 451100 },
        贺州市: { order: 10, depCode: 451000 },
        河池市: { order: 11, depCode: 451200 },
        来宾市: { order: 12, depCode: 451400 },
        崇左市: { order: 13, depCode: 451300 },
      },
      dataShow: [
        { name: "南宁市", depCode: "450100" },
        { name: "柳州市", depCode: "450200" },
        { name: "桂林市", depCode: "450300" },
        { name: "梧州市", depCode: "450400" },
        { name: "北海市", depCode: "450500" },
        { name: "防城港市", depCode: "450600" },
        { name: "钦州市", depCode: "450700" },
        { name: "贵港市", depCode: "450800" },
        { name: "玉林市", depCode: "450900" },
        { name: "百色市", depCode: "451100" },
        { name: "贺州市", depCode: "451000" },
        { name: "河池市", depCode: "451200" },
        { name: "来宾市", depCode: "451400" },
        { name: "崇左市", depCode: "451300" },
      ],
      option: {
        title: {
          text: "广西自治区",
          padding: [50, 0, 0, 90],
          textStyle: {
            color: "#EEAB59",
            fontSize: 30,
          },
        },
        toolbox: {
          top: 45,
          left: 10,
          show: true,
          itemSize: 25,
          itemGap: 12,
          feature: {
            myToolBj: {
              show: true,
              title: "本级",
              icon: "image://" + require("@/assets/images/bj2.png"),
              onclick: function () {
                // myChart.dispose();
                _self.goLocal();
                _self.updateDepCode("450000");
              },
            },
            myToolHome: {
              show: true,
              title: "自治区",
              icon: "image://" + require("@/assets/images/home2.png"),
              onclick: function () {
                // myChart.dispose();
                _self.goHome();
                _self.updateDepCode("45%");
              },
            },
          },
        },
        geo3D: {
          data: [],
          map: "guangxi",
          color: "#fff",
          roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。
          shading: `color`,
          colorMaterial: {
            detailTexture: _self.bg, // 纹理贴图
            textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
          },
          itemStyle: {
            areaColor: "red",
            borderWidth: 0.5,
            borderColor: "#000",
          }, //地图上每个省的颜色配置
          label: {
            show: true,
            color: "#000",
            borderColor: "red",
            fontFamily: "sans-serif",
            fontSize: 14,
            fontWeight: "bold",
            backgroundColor: "orange",
            borderRadius: 5,
            // width: 50,
            // height: 15,
            padding: [5, 2, 3, 2],
            clickable: true,
          }, // 标特是否显示，显示配置
          postEffect: {
            enable: false,
          },
          emphasis: {
            //当鼠标放上去的状态
            label: {
              show: true,
              formatter: function (params) {
                area = params.name;
                return params.name;
              },
            },
            itemStyle: {
              color: "rgba(255, 215, 0, 0.7)",
            },
          },

          // tooltip: "axis", //提示框设置

          formatter: (val) => {
            return val;
          },
          /** 标签内容格式器，支持字符串模板和
        回调函数两种形式，字符串模板与回调函数
        返回的字符串均支持用 \n 换行。**/

          // legendHoverLink: true,
          regions: [
            //对不同的区块进行着色
            {
              name: "南宁市", //区块名称
              itemStyle: {
                color: "#007EEE",
                opacity: 1,
                borderColor: "red",
                borderWidth: 1,
              },
            },
            {
              name: "柳州市", //区块名称
              height: 2.8,
              itemStyle: {
                color: "#0087B8",
                opacity: 1,
                borderWidth: 1,
              },
            },
            {
              name: "桂林市", //区块名称
              itemStyle: {
                color: "#0080E5",
                opacity: 1,
              },
            },
            {
              name: "梧州市", //区块名称
              itemStyle: {
                color: "#0071D0",
                opacity: 1,
              },
            },
            {
              name: "北海市", //区块名称
              itemStyle: {
                color: "#0055E7",
                opacity: 1,
              },
            },
            {
              name: "防城港市", //区块名称
              itemStyle: {
                color: "#004CDD",
                opacity: 1,
              },
            },
            {
              name: "钦州市", //区块名称
              itemStyle: {
                color: "#0061D7",
                opacity: 1,
              },
            },
            {
              name: "贵港市", //区块名称
              itemStyle: {
                color: "#0080D4",
                opacity: 1,
              },
            },
            {
              name: "玉林市", //区块名称
              itemStyle: {
                color: "#006FE3",
                opacity: 1,
              },
            },
            {
              name: "百色市", //区块名称
              itemStyle: {
                color: "#007DFF",
                opacity: 1,
              },
            },
            {
              name: "贺州市", //区块名称
              itemStyle: {
                color: "#006DD3",
                opacity: 1,
              },
            },
            {
              name: "河池市", //区块名称
              itemStyle: {
                color: "#00CFFF",
                opacity: 1,
              },
            },
            {
              name: "来宾市", //区块名称
              height: 3.4,
              itemStyle: {
                color: "#009FDC",
                opacity: 1,
                borderWidth: 0.1,
              },
            },
            {
              name: "崇左市",
              itemStyle: {
                color: "#004FF2",
                opacity: 1,
              },
            },
          ],
          viewControl: {
            projection: "orthographic",
            autoRotate: false,
            orthographicSize: 65,
            maxOrthographicSize: 120,
            minOrthographicSize: 40,
            alpha: 40,
            animation: true,
            animationDurationUpdate: 2000,
            animationEasingUpdate: "cubicInOut",
          },
          light: {
            main: {
              color: "#fff",
              intensity: 1.8,
              shadow: true,
              shadowQuality: "high",
              alpha: 50,
              beta: 5,
            },
          },
        },
        series: [
          {
            // name: "light",
            // type: "scatter3D", //标识点
            // symbol: "pin", //散点的形状。默认为圆形。
            // coordinateSystem: "geo3D",
            // data: [],
            // symbolSize: 30,
            // animation: true,
            // animationDurationUpdate: 100,
            // animationEasingUpdate: "cubicOut",
            // // label: {
            // //   normal: {
            // //     show: true, // 是否显示
            // //   },
            // // },
            // itemStyle: {
            //   color: "#f00",
            //   borderColor: "#fff",
            //   borderWidth: 1,
            // },
            // zlevel: 6,
            // emphasis: {
            //   //当鼠标放上去  地区区域是否显示名称
            //   label: {
            //     show: false,
            //   },
            //   itemStyle: {
            //     color: "orange",
            //   },
            // },
          },
        ],
      },
    };
  },
  mounted() {
    this.initEcharts();
  },
  activated() {
    window.addEventListener("resize", () => myChart.resize(), false);
  },
  beforeDestroy() {
    if (!myChart) {
      return;
    }
    myChart.dispose();
    myChart = null;
  },
  // setup() {
  //   const store = new useStore();

  //   const changeDepCode = (depCode) => {
  //     // asyncAddStoreCount是mutations中的方法，2是传递过去的数据
  //     // 异步改变vuex用dispatch方法，这里用setTimeout模拟异步操作
  //     console.log("改变全局。。。。。。。");
  //     store.dispatch("updateDepCode", depCode);
  //   };
  //   return {
  //     store,
  //     changeDepCode,
  //   };
  // },
  methods: {
    ...mapMutations(["updateDepCode"]),
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(6),
          });
        }
      }
      return res;
    },
    initEcharts() {
      const self = this;
      this.$echarts.registerMap(`guangxi`, mapJson);
      const canvas = document.createElement(`canvas`);
      this.bg = this.$echarts.init(canvas, null, {
        width: 1024,
        height: 1024,
      });
      this.bg.setOption(this.chartOption);
      myChart = this.$echarts.init(document.getElementById("map"));
      //   this.$echarts.registerMap("guangxi", mapJson);
      this.option.geo3D.data = this.dataShow;
      //   this.option.series[0].data = this.convertData(this.dataShow);
      this.option.geo3D.colorMaterial.detailTexture = this.bg;
      myChart.setOption(this.option);
      window.addEventListener("resize", () => myChart.resize(), false);
      // myChart.on("mousedown", function (params) {
      // // self.option.geo3D.regions[0].name = params.name;
      // // self.resetMap();
      // });
      myChart.getZr().off("click"); //防止触发连续点击事件
      myChart.getZr().on("click", function (e) {
        if (typeof e.target == "undefined") {
          let isinside = $("#map").children()[0].style.cursor;
          if (area !== "" && isinside == "pointer") {
            self.option = self.$options.data().option;
            self.option.title.text = area;
            self.option.geo3D.regions[self.geoMap[area].order].name = area;
            self.option.geo3D.regions[self.geoMap[area].order].itemStyle.color =
              "#FFDB12";
            self.option.geo3D.regions[self.geoMap[area].order].height = 4;
            self.resetMap();
            self.updateDepCode(self.geoMap[area].depCode);
            self.areaName = area;
          }
        }
      });
    },
    resetMap() {
      this.option.geo3D.colorMaterial.detailTexture = this.bg;
      myChart.setOption(this.option);
    },
    goHome() {
      this.option = this.$options.data().option;
      myChart.setOption(this.option);
      this.areaName = "广西自治区";
    },
    goLocal() {
      this.option.title.text = this.areaName + "（本级）";
      myChart.setOption(this.option);
    },
  },
};
</script>

<style scoped>
.map3 {
  width: 100%;
  height: 800px;
}
</style>